<template>
    <div v-if="item.hidden" class="menu-wrapper">
        <template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
            <el-submenu :index="item.path">
            <template slot="title">
                <i :class="item.meta.icon"></i>
                <span>{{ item.meta.title }}</span>
            </template>
        </el-submenu>
        </template>
        

    </div>
</template>

<script>
    export default {
        name: 'SidebarItem',
        props: {
            item: {
                type: Object,
                required: true
            },
            basePath: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                onlyOneChild: null
            }
        },
        methods: {
            // 当断当前菜单是否包含子菜单
            hasOneShowingChild(item, parent) {
                const showingChildren = item.children.filter(item => {
                    return !item.hidden
                })
                if (showingChildren.length === 1) {
                    return true
                }
                if(showingChildren.length === 0) {
                    this.onlyOneChild = {...parent, path: '', noShowingChildren: true}
                    return true
                }
                return false
            }
        }
    }
</script>

<style lang="less" scoped>

</style>